<template>
    <div class="ivz-online-silder">
        <div class="ivz-ol-content">
          <div class="ivz-ouc-item">
            <a-tabs default-active-key="basic">
              <a-tab-pane key="basic" tab="基础表单">
                <draggable v-model="form" :group="{name: 'edit', put: false, pull: 'clone'}"
                           tag="ul" class="ivz-olu" :clone="clone" :move="onMove">
                  <li v-for="item in form" :key="item.id" class="ivz-olu-label" @dragstart="dragHandle($event, item)">
                    <a class="ivz-olu-a">
                      <ivz-icon :style="{fontSize: '16px'}" :type="item.icon"></ivz-icon>
                    &nbsp; <span>{{item.name}}</span>
                    </a>
                  </li>
                </draggable>
                <li style="clear: both"></li>
              </a-tab-pane>
              <a-tab-pane key="high" tab="高级表单">
                <draggable v-model="highMetas" :group="{name: 'edit', put: false, pull: 'clone'}"
                           tag="ul" class="ivz-olu" :clone="clone" :move="onMove">
                  <li v-for="item in highMetas" :key="item.id" class="ivz-olu-label">
                    <a class="ivz-olu-a">
                      <ivz-icon :style="{fontSize: '16px'}" :type="item.icon"></ivz-icon>
                      &nbsp; <span>{{item.name}}</span>
                    </a>
                  </li>
                </draggable>
                <li style="clear: both"></li>
              </a-tab-pane>
            </a-tabs>
            <div class="ivz-ouc-item">
              <div style="font-size: 13px; padding: 5px 0px">表组件</div>
              <draggable v-model="db" :group="{name: 'edit', put: false, pull: 'clone'}"
                         tag="ul" class="ivz-olu" :clone="clone" :move="onMove">
                <li v-for="item in db" :key="item.id" class="ivz-olu-label" @drag="dragHandle">
                  <a class="ivz-olu-a">
                    <ivz-icon :style="{fontSize: '16px'}" :type="item.icon"></ivz-icon>
                    &nbsp; <span>{{item.name}}</span>
                  </a>
                </li>
              </draggable>
              <li style="clear: both"></li>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
import {reactive} from 'vue'
import {UnionType} from "@/store/consts";
import MetaUtils from "@/utils/MetaUtils";
export default {
  name: "IvzOnlineLeft",
  props: ['global'],
  data() {
    return {
      high: null,
      basic: null,
      layout: null,
      form: [  // 数据录入组件(表单)
        {name: "单行文本", id: 1, icon: 'iz-icon-input', type: 'text', union: UnionType.Form},
        {name: "多行文本", id: 2, icon: 'iz-icon-area', type: 'textarea', union: UnionType.Form},
        {name: "单选框", id: 3, icon: 'iz-icon-radio', type: 'radio', data: [
                {label: '测试', value: true}
            ], union: UnionType.Form},
        {name: "多选框", id: 4, icon: 'iz-icon-checkbox', type: 'checkbox', data: [
                {label: '测试', value: true}
            ], union: UnionType.Form},
        {name: "下拉框", id: 15, icon: 'iz-icon-select', type: 'select', union: UnionType.Form},
        {name: "树级下拉框", id: 52, icon: 'iz-icon-tree-select', type: 'stree', union: UnionType.Form},
        {name: "日期/时间", id: 6, icon: 'iz-icon-date', type: 'date', union: UnionType.Form},
        {name: "开关", id: 9, icon: 'iz-icon-switch', type: 'switch', union: UnionType.Form},
        {name: "数值", id: 10, icon: 'iz-icon-number', type: 'number', union: UnionType.Form},
        {name: "滑块", id: 8, icon: 'iz-icon-slider', type: 'slider', union: UnionType.Form},
        {name: "自动完成", id: 52, icon: 'iz-icon-autocomplete', type: 'complete', union: UnionType.Form},
        {name: "级联选择器", id: 54, icon: 'iz-icon-cascade', type: 'cascade', union: UnionType.Form},
        {name: "密码框", id: 20, icon: 'iz-icon-password', type: 'password', union: UnionType.Form},
        {name: "评分", id: 7, icon: 'iz-icon-rate', type: 'rate', union: UnionType.Form},
        {name: "提及", id: 9, icon: 'iz-icon-tiji', type: 'mentions', union: UnionType.Form},
        // {name: "标签", id: 50, icon: 'iz-icon-label', type: 'label', union: UnionType.Form},
      ],
      db: [
        {name: "外键(一对一)", id: 800, icon: 'iz-icon-modal', type: 'foreign', union: UnionType.Edit},
        {name: "外键(一对多)", id: 800, icon: 'iz-icon-modal', type: 'foreignToMany', union: UnionType.Edit},
        {name: "引用", id: 905, icon: 'iz-icon-container-drawer', type: 'quote', union: UnionType.Edit},
      ],
      // list: [
      //     {name: '文本', id: 125, icon: 'iz-icon-label', type: 'label', w: 180, h: 36},
      //     {name: '图片', id: 130, icon: 'iz-icon-img', type: 'img', w: 120, h: 120},
      //     {name: '卡片', id: 90, icon: 'iz-icon-card', type: 'card', h: 320
      //         , handles: ['tl','tr','br','bl'],  lockAspectRatio: true, w: 300},
      //     {name: '头像', id: 95, icon: 'iz-icon-avatar', type: 'avatar', h: 64
      //         , handles: ['tl','tr','br','bl'],  lockAspectRatio: true, w: 64},
      //     {name: '列表', id: 80, icon: 'iz-icon-list', type: 'list', w: 680},
      //     {name: '表格', id: 85, icon: 'iz-icon-table', type: 'table', w: 680, handles: ['mr', 'ml']},
      //     {name: '评论', id: 100, icon: 'iz-icon-comment', type: 'comment', w: 680},
      //     {name: '描述列表', id: 105, icon: 'iz-icon-desc', type: 'desc'},
      //     {name: '折叠面板', id: 110, icon: 'iz-icon-collapse', type: 'collapse'},
      //     {name: '树形控件', id: 103, icon: 'iz-icon-tree', type: 'tree'},
      //     {name: '数值统计', id: 115, icon: 'iz-icon-statistic', type: 'statistic'},
      //     {name: '时间轴', id: 120, icon: 'iz-icon-timeline', type: 'timeline'},
      // ],
      highMetas: [
          {name: "富文本", id: 50, icon: 'iz-icon-editor', type: 'editor', move: (target) => {
                  if(target.type == 'modal') {
                      return false;
                  } else {
                      return true;
                  }
              }
          },
          {name: "文件上传", id: 51, icon: 'iz-icon-upload', type: 'upload'},
          // {name: "树级选择器", id: 53, icon: 'iz-icon-tree', type: 'tree', data: [
          //         {title: '一级', key: '1', children: [
          //                 {title: '二级', key: '2'}
          //             ]}
          //     ]},
      ],
      options: {
          type: 'side', // 声明是左侧边栏可拖拽组件
      }
    }
  },
  methods: {
    clone(meta) { // 拖拽时克隆一份对象, id用当前的时间戳
        let clone = MetaUtils.cloneMeta(meta);

        clone['id'] = this.getMetaId();

        clone['active'] = false;
        clone['tabMetas'] = {};
        clone['tabModel'] = {}
        return reactive(clone)
    },
    dragHandle(e, item) {
        if(!item) return;

        let dataTransfer = e.dataTransfer;
        let clone = MetaUtils.cloneMeta(item);

        clone['id'] = this.getMetaId();
        dataTransfer.setData("application/json", JSON.stringify(clone));
    },
    getMetaId() {
        return MetaUtils.getMetaId();
    },
    onMove(evt) {
      // 目标元素上下文
      let relatedContext = evt['relatedContext'];
      let group = relatedContext.group;
      if(group) {
        if (group.put === false) {
          return false;
        }

        if (group.isDrop) {
          let form = evt['draggedContext']['element'];
          return group.isDrop(form);
        }
      }
      // 拖拽组件到了布局区则可移动
      return true;
    }
  }
}
</script>

<style>
  .ivz-online-silder ul,li{
      margin: 0px;
      padding: 0px;
      list-style: none;
  }
  .ivz-online-silder {
      width: 100%;
      padding: 8px;
  }
  .ivz-ouc-item .anticon {
      vertical-align: -0.24em;
  }
  .ivz-ouc-item .ant-tabs-tab{
    margin: 0px;
  }
  .ivz-olu-label {
      width: 48%;
      font-size: 12px;
      display: block;
      line-height: 26px;
      position: relative;
      float: left;
      left: 0;
      padding: 1px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 1%;
      color: #333;
      border: 1px solid #f4f6fc;
  }
  .ivz-olu-label a {
      cursor: move;
      display: block;
      color: #000000;
      padding-left: 3px;
      background: #f4f6fc;
      border: 1px solid #f4f6fc;
  }
  .ivz-olu-label a:hover {
      color: #409eff;
  }
  .ivz-olu-label:hover {
      color: #409eff;
      border: 1px dashed #409eff;
  }
</style>
